<template>
 <div>
    <el-dialog title="题目预览" :visible="isShowDialog" @close="cancle">
        <el-row type="flex" style="margin-bottom: 20px">
            <el-col :span="6">
                <span>【题型】：{{quesDetail.questionType}}</span>
            </el-col>
            <el-col :span="6">
                <span>【编号】：{{quesDetail.id}}</span>
            </el-col>
            <el-col :span="6">
                <span>【难度】：{{quesDetail.difficulty}}</span>
            </el-col>
            <el-col :span="6">
                <span>【标签】：{{quesDetail.tags}}</span>
            </el-col>
        </el-row>
        <el-row type="flex">
            <el-col :span="6">
                <span>【学科】：{{quesDetail.subjectID}}</span>
            </el-col>
            <el-col :span="6">
                <span>【目录】：{{quesDetail.catalogID}}</span>
            </el-col>
            <el-col :span="6">
                <span>【方向】：{{quesDetail.direction}}</span>
            </el-col>
        </el-row>
        <!-- 分割线 -->
        <el-divider/>
        <el-row type="flex">
            <el-col :span="3">
                <span>【题干】：</span>
            </el-col>
            <el-col>
                <span v-text="quesDetail.question"></span>
            </el-col>
        </el-row>
        <!-- 选项 -->
        <div v-show="isDiv" style="margin: 20px 0 0 30px">
            <el-row>
                <span>({{quesDetail.questionType}}题) 选项：（以下选中的选项为正确答案）</span>
            </el-row>
            <el-row type="flex" v-for="(item,index) in quesDetail.options" :key="index">
                <el-col :span="0.1">
                    <el-radio v-if="isShowRadio" v-model="item.isRight" :label="Number('1')" :disabled='item.isRight != 1'>{{item.code + '：'}}</el-radio>

                    <el-checkbox v-else  :value="Boolean(item.isRight)"  :disabled='item.isRight != 1'>{{item.code + '：'}}</el-checkbox>

                </el-col>
                <el-col :span="4">
                    <span>{{item.title}}</span>
                </el-col>
                <el-col :span="1">
                    <img :src="item.img" alt="">
                </el-col>
            </el-row>
        </div>
        <!-- 分割线 -->
        <el-divider />
        <el-row type="flex">
            <el-col :span="4">
                <span>【参考答案】：</span>
            </el-col>
            <el-col :span="12">
                <el-input v-model="quesDetail.videoURL"></el-input>
            </el-col>
            <el-col style="margin-left:10px">
                <el-button type="primary" @click="playVideo">解析视频</el-button>
            </el-col>
        </el-row>
         <!-- 分割线 -->
        <el-divider />
         <el-row type="flex">
            <el-col :span="4">
                <span>【答案解析】：</span>
            </el-col>
            <el-col>
                <span>{{quesDetail.answerID}}</span>
            </el-col>
        </el-row>
         <!-- 分割线 -->
        <el-divider />
         <el-row type="flex">
            <el-col :span="4">
                <span>【题目备注】：</span>
            </el-col>
            <el-col>
                <span>{{quesDetail.remarks}}</span>
            </el-col>
        </el-row>
        <!-- 底部插槽 -->
        <template #footer>
            <el-row type="flex" justify="end">
                <el-button type="primary" @click="cancle">关闭</el-button>
            </el-row>
        </template>

  </el-dialog>
   <!-- 视频弹层 -->
    <el-dialog :visible.sync="isShowVideo" title="解析视频：">
      <video v-if="isShowVideo" :src="playVideoURL" preload="metadata" poster='@/assets/logo.png' autoplay controls width="100%" height="420px"></video>
    </el-dialog>
 </div>

</template>

<script>
import { detail } from '@/api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants'
import { simple as subSimple } from '@/api/hmmm/subjects'
import { simple as dirSimple } from '@/api/hmmm/directorys'
export default {
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      quesDetail: {}, // 试题详情信息
      isShowRadio: true, // 是否显示单选组
      isDiv: true, // 是否显示选项div
      isShowVideo: false,
      playVideoURL: ''
    }
  },
  methods: {
    // 关闭
    cancle () {
      this.$emit('update:isShowDialog', false)
    },
    // 获取详情  该方法在父组件调用
    async detailInfo (id) {
      const { data } = await detail({ id })
      console.log(data)
      // 数据加工
      questionType.forEach(item => {
        if (item.value === Number(data.questionType)) {
          data.questionType = item.label
        }
      })
      difficulty.forEach(item => {
        if (item.value === Number(data.difficulty)) {
          data.difficulty = item.label
        }
      })
      // 调学科和目录接口
      const { data: sunData } = await subSimple()
      sunData.forEach(item => {
        if (item.value === data.subjectID) {
          data.subjectID = item.label
          dirSimple(item.label).then(({ data: r }) => {
            r.forEach(o => {
              if (o.value === data.catalogID) {
                data.catalogID = o.label
              }
            })
          })
        }
      })
      // 题干选项
      console.log(data.questionType)
      if (data.questionType === '单选') {
        this.isDiv = true
        this.isShowRadio = true
      } else if (data.questionType === '多选') {
        this.isDiv = true
        this.isShowRadio = false
      } else {
        this.isDiv = false
      }
      // 匹配正则去除题干标签
      data.question = data.question.replace(/<[^>]+>/gi, '')

      // 赋值处理后的数据
      this.quesDetail = data
    },
    // 视频播放
    playVideo () {
      this.isShowVideo = true
      if (this.quesDetail.videoURL) {
        this.playVideoURL = this.quesDetail.videoURL
      }
    }
  }
}
</script>

<style scoped>
.infostyle {
    margin-bottom: 30px;
}
</style>
